<template>
  <div class="login">
    <div class="loginBox">
      <form class="loginForm fr">
        <div class="login_logo">
          <img src="../../../static/images/login_logo.png">
        </div>

        <div class="loginMain">
          <input type="text"
                 v-model="ruleForm.userAccount"
                 placeholder="请输入用户名"
                 @keyup.enter="submitForm"
                 class="userName">
          <input type="password"
                 v-model="ruleForm.userPasswd"
                 placeholder="请输入密码"
                 @keyup.enter="submitForm"
                 class="password">

          <div class="clearfix remember">
            <el-checkbox label="记住密码"
                         name="type"
                         v-model='flag'></el-checkbox>
            <router-link to="register">注册</router-link>
          </div>
        </div>

        <div class="loginBtn_box">
          <input type="button"
                 @click="submitForm"
                 value="马上登录">
        </div>

        <div class="loginBt">
          <router-link to="getBack">忘记密码？</router-link>| &nbsp;
          <router-link to="handbook">用户手册使用下载</router-link>
        </div>
      </form>
    </div>

    <p class="login_footer">Copy Right © Bossien All Rights Reserved 武汉博晟安全技术股份有限公司 版权所有</p>
  </div>
</template>

<script>
import config from "../../config.js";
import {CompanyRouterMap} from '../../router/index.js'
export default {
  name: "",
  data () {
    return {
      flag: false,
      ruleForm: {
        userAccount: "",
        userPasswd: ""
      }
    };
  },
  created () {
  
    this.ruleForm.userPasswd = localStorage.password;
  },
  methods: {
    submitForm () {
      if (this.ruleForm.userPasswd && this.ruleForm.userAccount) {
        var params = {
          userPasswd: this.$md5(this.ruleForm.userPasswd),
          userAccount: this.ruleForm.userAccount
        }
        if (this.flag) {
          localStorage.username = this.ruleForm.userAccount
          localStorage.password = this.ruleForm.userPasswd
        } else {
          localStorage.removeItem('username')
          localStorage.removeItem('password')
        }
        this.$axios
          .post(config.baseUrl+ "emergency/v1.0/user/login", params)
          .then(res => {
            if (res.data.meta.success) {
              localStorage.showTime = 0
              localStorage.userid = res.data.data.user.id
              localStorage.businessId = res.data.data.user.businessId
              localStorage.user = JSON.stringify(res.data.data.user)
              this.$store.state.loginstates = res.data.data.user.userType;
              localStorage.removeItem("newList");
              if(this.$store.state.loginstates==1){
                  this.$router.addRoutes(CompanyRouterMap);
                  localStorage.setItem('new',JSON.stringify(CompanyRouterMap));
                  this.$router.push('index')
              }else if(this.$store.state.loginstates==2){
                  this.$router.push('waitAssess')
              }
            } else {
              this.$message.warning(res.data.meta.message)
            }
          })
          .catch(response => {
            console.log(response);
          });
      } else {
        this.$message.warning("用户名和密码不能为空");
        return false;
      }
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang='less' scoped>
.login {
  height: 100%;
  width: 100%;
  background: url("../../../static/images/loginBg.jpg") no-repeat;
  background-size: 100% 100%;
  position: relative;
  .loginBox {
    position: absolute;
    background: url("../../../static/images/loginBox_bg.png") no-repeat;
    height: 584px;
    width: 1191px;
    left: 50%;
    margin-left: -595px;
    top: 48%;
    margin-top: -292px;
    .loginForm {
      width: 550px;
      height: 534px;
      margin-top: 18px;
      margin-right: 25px;
      .login_logo {
        padding-left: 76px;
        padding-top: 45px;
        margin-bottom: 52px;
      }
      .loginMain {
        padding: 0 62px 0 76px;
        > input {
          width: 100%;
          border: 1px solid #dcdcdc;
          border-radius: 8px;
          height: 64px;
          padding-left: 60px;
          margin-bottom: 20px;
          background-repeat: no-repeat;
          background-position: left 15px center;
        }
        > input::placeholder {
          color: #ccc;
        }
        .userName {
          background-image: url("../../../static/images/user_icon1.png");
        }
        .userName:focus {
          background-image: url("../../../static/images/user_icon2.png");
          border-color: #4080ff;
        }
        .password {
          background-image: url("../../../static/images/password_icon1.png");
        }
        .password:focus {
          background-image: url("../../../static/images/password_icon2.png");
          border-color: #4080ff;
        }
        .remember {
          padding: 0 10px 0 5px;
          a {
            float: right;
            color: #999;
          }
          a:hover {
          color: #4080ff;
        }
        }
      }
      .loginBtn_box {
        background: url("../../../static/images/loginBtn_bg.png") no-repeat left
          51px center;
        height: 116px;
        padding: 19px 0 0 76px;
        margin-top: 10px;
        > input {
          width: 412px;
          height: 65px;
          cursor: pointer;
          background: transparent;
          border: 0;
          color: #fff;
          font-size: 16px;
        }
        > input:hover{
            opacity: .9;
        }
      }
      .loginBt {
        text-align: center;
        color: #999;
        a {
          color: #999;
        }
        a:hover {
          color: #4080ff;
        }
      }
    }
  }
  .login_footer {
    position: fixed;
    bottom: 5%;
    font-size: 12px;
    width: 100%;
    text-align: center;
    color: #888;
  }
}
</style>
